<template>
  <div class="app-container-no-bc">
    <el-card>
      <el-row>
        <el-col :span="12">工单号:{{ orderInfo.id }} </el-col>
        <el-col :span="12">
          <div v-if="!isAudit" style="float: right">
            <Button v-if="orderInfo.status === 'open'" type="error" size="large" icon="md-undo" style="float: right" ghost @click="revokeOrder">撤销</Button>
          </div>
          <div v-else style="float: right">
            <span v-if="orderInfo.status === 'open'">
              <Button type="error" size="large" icon="md-close" ghost @click="rejectOrder">驳回</Button>
              <span style="padding-left: 20px">
                <Button type="success" size="large" icon="md-checkmark" ghost @click="successOrder">同意</Button>
              </span>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="16">
          <el-row :gutter="16">
            <el-col :span="12">
              类型:<span class="order_detail">{{ orderInfo.orderType }}</span>
            </el-col>
            <el-col :span="12">
              数据库类型: <span class="order_detail">{{ orderInfo.dbType }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              数据库集群:
              <span class="order_detail">{{ orderInfo.dbClusterName }}</span>
            </el-col>
            <el-col :span="12">
              数据库: <span class="order_detail">{{ orderInfo.dbDatabase }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              数据表:<span class="order_detail">{{ orderInfo.dbTable }}</span>
            </el-col>
            <el-col :span="12">
              申请人:<span class="order_detail">{{ orderInfo.createBy }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              申请时间:<span class="order_detail">{{ orderInfo.createTime }}</span>
            </el-col>
            <el-col :span="12">
              当前审批人: <span class="order_detail"><Tag color="success">admin</Tag></span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <i-circle :percent="circleInfo.percent" :stroke-color="circleInfo.color">
            <span class="demo-Circle-inner" style="font-size: 24px">{{ circleInfo.content }}</span>
          </i-circle>
        </el-col>
      </el-row>
    </el-card>

    <div style="padding-top: 10px">
      <el-row :gutter="16">
        <el-col :span="4">
          <el-card>
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" :color="activity.color">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-col>
        <el-col :span="20">
          <code-sql :sqls="orderInfo.sqls"></code-sql>
          <log-view :submit-log="submitLog" :execute-log="executeLog" :result-log="resultLog"></log-view>
        </el-col>
      </el-row>
    </div>
    <confirm-modal :confirm-modal="showConfirmModal" :action="action" :order-info="orderInfo" @on-order-confirm="setOrderConfirm"></confirm-modal>
  </div>
</template>

<script>
import CodeSql from '@/views/ticket/order/components/CodeSql'
import { getTicketOrder } from '@/api/ticket/order'
import ConfirmModal from '@/views/ticket/order/components/ConfirmModal'
import LogView from '@/views/ticket/order/components/LogView'
export default {
  name: 'OrderDetail',
  components: { CodeSql, ConfirmModal, LogView },
  data() {
    return {
      activities: [],
      action: {
        type: '',
        title: ''
      },
      orderInfo: {},
      showConfirmModal: false,
      circleInfo: {},
      submitLog: [],
      executeLog: [],
      resultLog: []
    }
  },
  computed: {
    orderId() {
      return this.$route.params.orderId
    },
    isAudit() {
      const path = this.$route.path
      if (path.startsWith('/ticket/audit')) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.getTicketOrder()
  },
  methods: {
    async getTicketOrder() {
      const { data } = await getTicketOrder(this.orderId)
      this.orderInfo = data
      const activities = []
      const createBy = data.createBy
      const auditBy = data.auditBy
      const executeBy = data.auditBy
      data.logs.map((item) => {
        if (item.type === 'submit') {
          this.submitLog = item.result
          activities.push({
            timestamp: item.createTime,
            content: createBy + ' 已提交',
            color: '#0bbd87'
          })
        }
        if (item.type === 'execute') {
          this.executeLog = item.result
          activities.push({
            timestamp: item.createTime,
            content: auditBy + '  已审核',
            color: '#0bbd87'
          })
        }
        if (item.type === 'result') {
          this.resultLog = item.result
          activities.push({
            timestamp: item.createTime,
            content: executeBy + '  已执行',
            color: '#0bbd87'
          })
        }
      })
      if (activities.length === 1) {
        activities.push({
          timestamp: '',
          content: '  等待DBA审核',
          color: ''
        })
      } else if (activities.length === 2) {
        activities.push({
          timestamp: '',
          content: '  等待DBA执行',
          color: ''
        })
      }
      this.activities = activities
      if (data.status === 'success') {
        this.circleInfo = {
          content: '完成',
          percent: 100,
          color: '#5cb85c'
        }
      } else if (data.status === 'reject') {
        this.circleInfo = {
          content: '驳回',
          percent: 0,
          color: '#ff5500'
        }
      } else if (data.status === 'revoke') {
        this.circleInfo = {
          content: '已撤销',
          percent: 30,
          color: '#ff9900'
        }
      } else {
        this.circleInfo = {
          content: '审核中',
          percent: 50
        }
      }
    },
    successOrder() {
      this.action = {
        type: 'success',
        title: '通过'
      }
      this.showConfirmModal = true
    },
    rejectOrder() {
      this.action = {
        type: 'reject',
        title: '驳回'
      }
      this.showConfirmModal = true
    },
    revokeOrder() {
      this.action = {
        type: 'revoke',
        title: '撤销'
      }
      this.showConfirmModal = true
    },
    setOrderConfirm(val) {
      this.showConfirmModal = val['status']
      if (!val['status'] && val['type'] !== 'cancel') {
        this.getTicketOrder()
      }
    }
  }
}
</script>

<style lang='scs' scoped>
</style>
<style>
.order_detail {
  padding-left: 20px;
}
</style>
